﻿@page "/datagrid/sorting"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the DataGrid multi sorting feature. To sort two or more columns, hold the CTRL key and click the column header.</p>
</SampleDescription>
<ActionDescription>
   <p>Sorting feature enables us to order the data in a particular direction. It can be enabled by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting'>AllowSorting</a></code> property as true.</p>
   <p>To sort a DataGrid column simply click the column header. The icons <span class=""e-icons e-icon-ascending""></span>(ascending) and <span class=""e-icons e-icon-descending""></span>(descending) specifies the sort direction of a column.</p>
   <p>By default, multi-sorting is enabled in DataGrid, to sort multiple columns hold the <strong> CTRL</strong> key and click the column header. To clear sort for a column, hold the <strong> SHIFT</strong> key and click the column header.</p>
   <p>While using DataGrid in a touch device, you have an option for multi sorting in single tap on the DataGrid header. By tapping on the DataGrid header, it will show the toggle button in small popup with sort icon. Now, tap the button to enable the multi-sorting in a single tap.</p>
   <p>In this demo, simply click the column header to sort them.</p>
   <p>More information on the multi sorting feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/sorting/#multi-column-sorting'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@Orders"  AllowSorting="true" AllowPaging="true">
                <GridSortSettings>
                    <GridSortColumns>
                        <GridSortColumn Field="CustomerID" Direction="SortDirection.Ascending"></GridSortColumn>
                        <GridSortColumn Field="OrderDate" Direction="SortDirection.Descending"></GridSortColumn>
                    </GridSortColumns>
                </GridSortSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>



@code{

    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 25).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "Michael", "Carlos", "Ronald", "Fransico", "Peter", "Bernado", "Christiano" })[new Random().Next(12)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}
